@CHARSET "UTF-8";

@def link_bgImg 			none;
@def link_bgCol 			#ccc;
@def link_fgCol 			#003;
@def link_hover_bgImg 	none;
@def link_hover_fgCol 	#000;

@def btn_bgImg 			none;
@def btn_bgCol 			#ccc;
@def btn_fgCol 			#003;
@def btn_hover_fgCol 	#000;

@def btn_tgl_bgImg 		none;
@def btn_tgl_bgCol 			#ccc;
@def btn_tgl_fgCol 			#000;
@def btn_tgl_sel_bgImg 	none;
@def btn_tgl_sel_bgCol 			#99c;
@def btn_tgl_sel_fgCol 			#000;

@def cntnr_bgImg 	none;
@def cntnr_bgCol 	#669;

@def ttld_cntnr_label_bgImg 		none;

body * {
    box-sizing: content-box;
}

* {
}


/* LABEL */

.label {
	display: inline-block;
	
	position: relative;
	
	height: 22px;
	line-height: 22px;
	
	padding: 0px 11px;
	
	
    font-size: 18px;
	font-family: serif;
    font-style: normal;
    font-weight: normal;
    
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    
	color: #eef;
    
    text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.8);
}


/* LINK */

a.link {
	display: inline-block;
	
	height: 22px;
	line-height: 22px;
	
	padding: 0px 5px 0px 5px;
	
	border-radius: 11px;
	border: 0.2em solid rgba(238, 238, 238, 0.8);
	
	color: link_fgCol;
	
	background-image: link_bgImg;
	background-color: link_bgCol;
	
    font-size: 14px;
	font-family: sans-serif;
    font-style: normal;
    font-weight: lighter;
    
    vertical-align: middle;
    
    text-align: center;
    text-shadow: 0.1em 0.1em 0.1em rgba(255, 255, 255 ,0.8);
}

.link:HOVER {
	text-decoration: none;

	color: link_hover_fgCol;
	
	background-image: link_hover_bgImg;
	
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 255, .9);
    
	border: 0.2em solid rgba(255, 255, 255, 0.8);
}

.link:FOCUS {
	border-color: rgba(255, 255, 153, 0.8);
	
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 102, .9);
    
    outline: none;
}

.link:FOCUS:HOVER {
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 255, .9);
}


/* BUTTON */

.button {
	display: inline-block;
	
	height: 33px;
	line-height: 33px;
	
	padding: 0px 11px;
	
	border-radius: 22px;
	border: 0.2em solid rgba(238, 238, 238, 0.8);
	
    font-size: 14px;
	font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    
    vertical-align: middle;
	
	color: btn_fgCol;
	
	background-image: btn_bgImg;
	background-color: btn_bgCol;
    
    text-shadow: 0.1em 0.1em 0.1em rgba(255, 255, 255 ,0.8);
    
    cursor: pointer;
}

.button:HOVER {
	color: btn_hover_fgCol;
	text-decoration: none;
	
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 255, .9);
    
/* 	border: 0.2em solid rgba(255, 255, 255, 0.8); */
}

.button:FOCUS {
	border-color: rgba(255, 255, 153, 0.8);
	
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 102, .9);
    
    outline: none;
}

.button:FOCUS:HOVER {
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 255, .9);
}

.button-toggle {
	color: btn_tgl_fgCol;
	
	background-image: btn_tgl_bgImg;
	background-color: btn_tgl_bgCol;
	
	border-radius: 11px;
	
}

.button-toggle-selected {
	color: btn_tgl_sel_fgCol;
	
	background-image: btn_tgl_sel_bgImg;
	background-color: btn_tgl_sel_bgCol;
	
    box-shadow: 0.0em 0.0em 0.75em rgba(204, 204, 255, .9);
    
    border-color: rgba(204, 204, 255, 0.8);
}

/* ButtonsContainer */

.buttons-container {
	margin: 0;
}

/* INPUT */

.input,
input.input {
	height: 33px;
/* 	line-height: 33px; */
	
	padding: 3px 11px 0px 11px;
	
	border-radius: 11px;
	border: 0.2em solid rgba(238, 238, 238, 0.8);
	
    font-size: 14px;
	font-family: monospace;
    font-style: normal;
    font-weight: bold;
    
    vertical-align: middle;
}

.input:HOVER {
/* 	color: btn_hover_fgCol; */
	text-decoration: none;
	
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 255, .9);
}

.input:FOCUS {
	
	border-color: rgba(255, 255, 153, 0.8);
	
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 102, .9);
    
    outline: none;
}

.input:FOCUS:HOVER {
    box-shadow: 0.0em 0.0em 0.75em rgba(255, 255, 255, .9);
}


/* TABLE */

.table {
	display: table;
}

.table-row {
	display: table-row;
}

.table-header {
	display: table-cell;
}

.table-data {
	display: table-cell;
}


/* CONTAINER */

.container {
	position: relative;
	display: block;
	
	padding: 11px;
	
	border-radius: 11px;
	border: 0.2em solid rgba(204, 204, 255, 0.6); 
	
	background-image: cntnr_bgImg;
	background-color: cntnr_bgCol;
	
	text-align: left;
}


/* TITLED CONTAINER */

.titled-container {
	margin: 22px 5px 11px 5px;
	padding: 0px 11px;
}

.titled-container-label {
	
	display: inline-block;
	
	position: relative;
	top: -11px;
	left: 0px;
	
    font-size: 22px;
    font-style: italic;
    
	border-radius: 11px 11px 0px 0px;
    
    text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.8);
    
    background-image: ttld_cntnr_label_bgImg;
}

.titled-container-content {
	display: block;
	
	position: relative;
	top: -5px;
	left: 0px;
	
	
	vertical-align: middle;
/* 	text-align: center; */
	
}

/* WINDOW */

.window {
	display: inline-block;	
	min-width: 320px;
	min-height: 120px;
	border-radius: 0.4em;
	border: 0.2em solid rgba(204, 204, 255, 0.6); 
	
	background-image: cntnr_bgImg;
	background-color: cntnr_bgCol;
}

.window-opening {  
	-moz-animation-duration: 0.5s;
  	-moz-animation-name: bounceIn;
  	-moz-animation-timing-function: ease-in-out;
}

.window-minimizing {  
	min-width: 121px;
	min-height: 0px;
	
	height: 44px;
}

.window-minimizing .window-content {
	-moz-animation-duration: 0.5s;
  	-moz-animation-name: makeSmall;
  	-moz-animation-timing-function: ease-in-out;
}

.window-minimized {   
	min-width: 121px;
	min-height: 0px;
}
.window-minimized .window-content {  
	display: none;	
/* height: 0; */
}

.window-minimized .window-header {
	max-width: 110px;
}

.window-maximizing {  
	-moz-animation-duration: 0.5s;
  	-moz-animation-name: makeBig;
  	-moz-animation-timing-function: ease-in-out;
}

.window-maximized {  
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

.window-closing {  
	-moz-animation-duration: 0.25s;
  	-moz-animation-name: moveOut;
  	-moz-animation-timing-function: ease-in-out;
}

.window-header {
	position: relative;
	display: block;
	height: 22px;
	white-space: nowrap;
	background-color: rgba(0,0,0,0.25);
    
    background-image: ttld_cntnr_label_bgImg;
    
    padding-right: 88px;
}

.window-header-title {
	display: block;
/* 	background-color: rgba(255, 255, 255, 0.25); */
/* 	font-family: sans-serif; */

	font-size: 22px;
}

.window-header-buttons {
	position: absolute;
	top: -11px;
	right: -11px;
	display: inline-block;
}

.window-header-buttons-close,
.window-header-buttons-minimize,
.window-header-buttons-maximize {
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0 0 0 11px;
}

.window-header-buttons-close {
	width: 33px;
	height: 33px;
	background-color: #600;	
}

.window-header-buttons-minimize {
	background-color: #c60;	
}

.window-header-buttons-maximize {
	background-color: #039;		
}

.window-content {
	overflow: auto;
}

 
@-moz-keyframes bounceIn {
  0% {
    -moz-transform: scale(0.0);
    opacity: 0.0;
  }
 
  90% {
    -moz-transform: scale(1.125);
    opacity: 1.0;
  }
 
  100% {
    -moz-transform: scale(1.0);
  }
}
 
@-moz-keyframes makeSmall {
  0% {
    -moz-transform: scaleY(1.0);
    opacity: 1.0;
  }
 
  100% {
    -moz-transform: scaleY(0.0);
    opacity: 0.0;
  }
}

@-moz-keyframes makeBig {
  0% {
    
  }
 
  100% {
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

@-moz-keyframes moveOut {
  0% {
    -moz-transform: scaleY(1.0);
    opacity: 1.0;
  }
 
  100% {
    -moz-transform: scaleY(0.0);
    opacity: 0.0;
  }
}

/* I-FRAME */

.iframe {
	border: 1px solid #666;
}

